:root { --ink:#17233c; --muted:#65708a; --paper:#fffdfa; --line:#dfe5ef; --brand:#4d45c7; --accent:#22a6a1; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#eef2f8; font:17px/1.78 "Noto Sans Armenian","Segoe UI",Arial,sans-serif; }
.hero { padding:4.5rem max(1.5rem, calc((100% - 1120px)/2)); color:white; background:radial-gradient(circle at 85% 15%,#51c5c0 0,transparent 31%),linear-gradient(120deg,#28216e,#554ad5); }
.hero p { margin:.5rem 0 0; opacity:.8; }.eyebrow { margin:0; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.75rem; }
.hero h1 { max-width:850px; margin:.4rem 0 0; font-size:clamp(2rem,5vw,4rem); line-height:1.13; letter-spacing:-.04em; }
.layout { max-width:1120px; margin:0 auto; padding:2rem 1.25rem 5rem; display:grid; grid-template-columns:245px minmax(0,1fr); gap:2.5rem; }
aside { position:sticky; top:1rem; align-self:start; max-height:calc(100vh - 2rem); overflow:auto; padding:1.15rem; border-radius:16px; background:#f8faff; border:1px solid var(--line); }
aside strong { font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } aside a { display:block; padding:.35rem 0; color:var(--muted); text-decoration:none; font-size:.9rem; } aside a:hover { color:var(--brand); }
main { min-width:0; background:var(--paper); padding:clamp(1.4rem,4vw,4rem); border-radius:20px; box-shadow:0 16px 45px rgba(29,42,73,.09); }
h2,h3 { scroll-margin-top:1rem; line-height:1.25; color:#28216e; } h2 { margin:3.2rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:1.75rem; } h2:first-child { margin-top:0; padding-top:0; border:0; }
h3 { margin:2rem 0 .7rem; font-size:1.25rem; } p { margin:0 0 1.1rem; } ul,ol { margin:.25rem 0 1.25rem; padding-inline-start:1.5rem; } li { padding-inline-start:.25rem; margin:.32rem 0; } li::marker { color:var(--brand); font-weight:700; }
table { width:100%; border-collapse:collapse; margin:1.5rem 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; font-size:.94rem; } td,th { padding:.75rem; vertical-align:top; text-align:start; border:1px solid var(--line); } tr:first-child { background:#f1f3ff; font-weight:700; }
.note { border-inline-start:4px solid var(--accent); background:#effaf9; padding:1rem 1.15rem; border-radius:0 10px 10px 0; } code { padding:.12rem .32rem; border-radius:4px; background:#f1f2f6; font-family:Consolas,monospace; } a { color:#3e36ad; }
@media (max-width:760px) { .hero{padding:2.8rem 1.25rem}.layout{display:block;padding:1rem}.layout aside{position:relative;top:auto;margin:0 0 1rem;max-height:220px}main{padding:1.5rem 1.25rem;border-radius:14px} }
@media print { body{background:white}.hero{padding:1.5cm;background:#fff;color:#17233c}.layout{display:block;padding:0}.layout aside{display:none}main{box-shadow:none;padding:0} }